<template>
	<view class="content">
		<!-- 顶部导航栏组件 -->
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="#ffffff"></QSNavbar>
		<view class="news-box">
			<!-- 新闻描述 -->
			<view class="news-remark">
				<u--text :text="newsData.title" v-if="newsData.title" :bold="true" size="22"></u--text>
			</view>
			<!-- 发送方和发送时间 -->
			<view class="new-item-time">
				<view class="building">
					<u--text :prefixIcon="building" :text="newsData.site_name" align="left" size="20rpx"
						:iconStyle="{width:20+'rpx',height:20+'rpx'}" color="#999999" lines="1"
						v-if="newsData.site_name"></u--text>
				</view>

				<view class="building">
					<u--text :text="newsData.set_day" size="20rpx" color="#999999" align="left"
						v-if="newsData.set_day"></u--text>
				</view>
				<!-- <u--text prefixIcon="bookmark" :text="newsData.num_read" size="20rpx" color="#999999" align="left" v-if="newsData.num_read || newsData.num_read == 0"></u--text> -->
			</view>
			<!-- 内容 -->
			<view class="u-content">
				<!-- <u-parse :content="newsData.content"></u-parse> -->
				<view class="">
					<view class="">
						<!-- {{newsData.detail_content}} -->
						<u-parse :content="newsData.detail_content"></u-parse>
					</view>
					<!-- <image :src="newsData.smallimage" >
					</image> -->
					 <!-- <view class="container">
					    <image class="img" mode="aspectFit" :src="newsData.smallimage" />
					  </view> -->
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	const index = require('@/api/index/index.js')
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#000000'
				}, {
					type: 'text',
					text: '咨询详情',
					width: 70,
					weight: 'bold',
					color: '#000000',
					textAlign: 'left'
				}],
				newsData: {},
				building: this.$https.assetsPath + '48c89be73bd5b5100d62d9e224efd88047b262fa.png',
			};
		},
		onLoad(option) {
			let that = this
			if (option.id) {
				that.getNewsDetail(option.id)
			}
		},
		methods: {
			async getNewsDetail(id) {
				let that = this
				let data = {
					ids: id
				}
				let result = await index.trendsview(data)
				if (result.code == 1) {
					that.newsData = result.data
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.img {
	  width: 100%;
	}
	.content {
		display: flex;
		flex-direction: column;
		padding-right: 20rpx;
		flex-wrap: wrap;
	}

	.new-item-time {
		display: flex;
	}

	.building {
		width: 200rpx;
	}

	.new-item-time /deep/ .u-text__value {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.news-box {
		padding: 26rpx;
	}

	.news-remark {
		padding-bottom: 20rpx;
	}

	.new-item-time {
		padding-bottom: 20rpx;
	}
</style>